@charset "UTF-8";
body.modal-open {
  position: fixed;
  width: 100%;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}
.header .inner {
  position: relative;
  z-index: 100;
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 60px 30px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #383A42;
  z-index: 1;
  transform: translate3d(0, -150%, 0);
  transition: all 0.375s ease-in;
}
.header.scrolling::after {
  transform: translate3d(0, 0, 0);
}

.m-nav-switch {
  display: none;
}

.logo {
  width: 183px;
  height: 31px;
  background: url(../images/logo@2x.png) no-repeat;
  background-size: 100% auto !important;
  display: inline-block;
}

.nav ul {
  display: flex;
}
.nav li {
  line-height: 44px;
  position: relative;
  font-size: 18px;
  cursor: pointer;
}
.nav li a {
  color: #fff;
  display: inline-block;
  padding: 0 40px;
  position: relative;
}
.nav li a.first-level-menu::after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--main-color);
  position: absolute;
  left: 50%;
  margin-left: -3px;
  bottom: 0;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: all 0.275s linear;
}
.nav li a.first-level-menu {
  display: flex;
  align-items: center;
}
.nav li a.first-level-menu .icon-arrow-d {
  margin-left: 5px;
}
.nav li .m-drop-arrow {
  display: none;
}
.nav li.drop-menu:hover .drop-content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  height: auto;
  overflow: initial;
}
.nav li .drop-content {
  width: 370px;
  height: 0;
  overflow: hidden;
  transition: transform 0.275s ease-in, opacity 0.375s linear;
  opacity: 0;
  transform: translate3d(0, 25%, 0);
  padding-top: 5px;
  position: absolute;
  left: 50%;
  margin-left: -80px;
  top: 43px;
}
.nav li .drop-content .item {
  width: 160px;
  background-color: #383e4c;
  line-height: 60px;
  position: relative;
  cursor: pointer;
}
.nav li .drop-content .item:last-child {
  border-bottom: none;
}
.nav li .drop-content .item > a {
  color: rgba(255, 255, 255, 0.5);
  padding: 0 0 0 35px;
  display: flex;
  align-items: center;
}
.nav li .drop-content .item > a .txt {
  margin-right: 10px;
}
.nav li .drop-content .item > a .icon-arrow-r {
  opacity: 0.5;
}
.nav li .drop-content .item .drop__cont {
  width: 0;
  overflow: hidden;
  position: absolute;
  background-color: #282c37;
  left: 100%;
}
.nav li .drop-content .item .drop__cont a {
  width: 208px;
  box-sizing: border-box;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 35px;
}
.nav li .drop-content .item .drop__cont a:last-child {
  border-bottom: none;
}
.nav li .drop-content .item .drop__cont a.current, .nav li .drop-content .item .drop__cont a:hover {
  background-color: #2b3d4b;
  color: var(--color-blue);
}
.nav li .drop-content .item:nth-child(1) .drop__cont {
  top: 0px;
}
.nav li .drop-content .item:nth-child(2) .drop__cont {
  top: -60px;
}
.nav li .drop-content .item:nth-child(3) .drop__cont {
  top: -120px;
}
.nav li .drop-content .item:nth-child(4) .drop__cont {
  top: -180px;
}
.nav li .drop-content .item.current, .nav li .drop-content .item:hover {
  background-color: #394b5f;
}
.nav li .drop-content .item.current > a, .nav li .drop-content .item:hover > a {
  color: var(--color-blue);
}
.nav li .drop-content .item.current > a .icon-arrow-r, .nav li .drop-content .item:hover > a .icon-arrow-r {
  background-position: -9px 0;
  opacity: 1;
}
.nav li .drop-content .item.current .drop__cont, .nav li .drop-content .item:hover .drop__cont {
  width: 208px;
  transition: all 0.275s ease-in;
}
.nav li.lang-switch {
  margin-left: 30px;
}
.nav li.lang-switch > a {
  padding-right: 0;
}
.nav li.lang-switch::after {
  content: "";
  width: 1px;
  height: 14px;
  background-color: #fff;
  opacity: 0.8;
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translate(0, -50%);
}
.nav li.current a, .nav li:hover a {
  color: var(--main-color);
}
.nav li.current a .icon-arrow-d, .nav li:hover a .icon-arrow-d {
  transform: rotate(180deg);
}
.nav li.current a.first-level-menu::after, .nav li:hover a.first-level-menu::after {
  transform: scale(1);
  opacity: 1;
}

.icon-arrow-d {
  width: 14px;
  height: 6px;
  background: url(../images/icon-arrow-d.png) no-repeat;
  background-size: cover;
  display: inline-block;
  transition: all 0.275s ease-in;
}

.icon-arrow-r {
  width: 9px;
  height: 14px;
  background: url(../images/icon-arrow-r.png) no-repeat;
  background-size: 18px 14px;
  display: inline-block;
}

.wrap-box {
  width: 1440px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 21;
}

.wrap-box-1200 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 21;
  padding: 0 25px;
}

.green, a.green {
  color: var(--main-color) !important;
}

a.green:hover {
  text-decoration: underline;
}

.blue {
  color: var(--color-blue) !important;
}

.footer {
  max-width: 2560px;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .copyright {
  width: 100%;
  box-sizing: border-box;
  padding: 0 25px;
  text-align: center;
  transform: translate(-50%, 0);
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 10;
}
.footer .lattice-5 {
  right: -180px;
  top: -200px;
}
.footer .lattice-6 {
  left: -108px;
  top: -120px;
  z-index: 2;
}
.footer .lattice-group {
  top: 24%;
  right: 36%;
  z-index: 1;
}
.footer .wrap-box {
  z-index: 20;
}
.footer .video-bg {
  top: 50%;
}
.footer .video-bg::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 58%;
  left: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgb(36, 40, 49) 3%, rgba(36, 40, 49, 0) 94%);
}

.footer-cont {
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
}
.footer-cont .infor-box {
  width: 310px;
}
.footer-cont .infor-box .WX-code {
  max-width: 135px;
  margin-top: 35px;
  text-align: center;
}

.form-box {
  width: 72.25%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form-box .form-item {
  width: 50%;
  box-sizing: border-box;
  padding-right: 60px;
  margin-bottom: 18px;
}
.form-box .form-item.textarea-item {
  width: 100%;
}
.form-box .form-item .label {
  display: block;
  padding-bottom: 6px;
}
.form-box .form-item .tel-item {
  position: relative;
}
.form-box .form-item .tel-item i {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.form-box .form-item .tel-item .input {
  padding-left: 50px;
}
.form-box .form-item .input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 0;
  font-size: var(--f-size-20);
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1px rgba(255, 255, 255, 0.6) solid;
}
.form-box .form-item .input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.form-box .form-item .input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.form-box .form-item .select-item {
  width: 100%;
}
.form-box .form-item .select-item .select-text {
  padding: 12px 0;
}
.form-box .form-item .textarea {
  width: 100%;
  min-height: 100px;
  border: 1px rgba(255, 255, 255, 0.6) solid;
  background: none;
  box-sizing: border-box;
  padding: 10px;
  color: #fff;
  font-size: var(--f-size-20);
}

.mobile-show {
  display: none !important;
}

.mobile-hide {
  display: block !important;
}

.contact-infor-tabbox .infor-tab-nav {
  padding-top: 35px;
  padding-bottom: 12px;
}
.contact-infor-tabbox .infor-tab-nav .item {
  cursor: pointer;
  padding: 0 25px;
  display: inline-block;
  position: relative;
}
.contact-infor-tabbox .infor-tab-nav .item:first-child {
  padding-left: 0;
}
.contact-infor-tabbox .infor-tab-nav .item:first-child::before {
  display: none;
}
.contact-infor-tabbox .infor-tab-nav .item::before {
  content: "";
  width: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
}
.contact-infor-tabbox .infor-tab-nav .active {
  color: #fff;
  font-size: 1.25em;
}

.select-item {
  position: relative;
}
.select-item .select-text {
  display: block;
  box-sizing: border-box;
  border-bottom: 1px rgba(255, 255, 255, 0.6) solid;
  color: #fff;
  position: relative;
  cursor: pointer;
}
.select-item .select-text::after {
  content: "";
  width: 32px;
  height: 17px;
  background-image: url(../images/arrow-d@2x.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  opacity: 0.5;
  transition: transform 0.275s linear;
}
.select-item.opened .select-text::after {
  transform: rotate(180deg);
}
.select-item.opened .select-options {
  transform: scaleY(1);
}
.select-item .select-options {
  background-color: #383e4d;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.275s linear;
  position: absolute;
  left: 0;
  right: 0;
}
.select-item .select-options li {
  cursor: pointer;
  padding: 6px 15px;
  color: #a9aaad;
  margin-bottom: 1px;
}
.select-item .select-options li.selected, .select-item .select-options li:hover {
  background-image: url(../images/icon-confirm.png);
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: right center;
  background-origin: content-box;
  background-color: #384c5f;
  color: var(--main-color);
}

.bot-logo {
  width: 200px;
  display: block;
}

.top-banner {
  max-width: 2560px;
  height: 100vh;
  min-height: 600px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
}
.top-banner .wrap-box {
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
}
.top-banner .inner-cont {
  font-size: var(--f-size-60);
  position: relative;
}
.top-banner .inner-cont h3 {
  font-size: inherit;
  color: #fff;
  font-weight: bold;
  padding-bottom: 0.675em;
  position: relative;
  z-index: 32;
}
.top-banner .inner-cont .en {
  font-size: 0.6em;
  line-height: 1.1;
  font-weight: 300;
  position: relative;
  z-index: 32;
}
.top-banner .inner-cont .zh {
  width: 690px;
  font-size: 0.535em;
  line-height: 1.4;
  font-weight: 300;
  position: relative;
  z-index: 32;
}
.top-banner .inner-cont .lattice-group {
  left: 39.5%;
  top: -160px;
}
.top-banner .lattice-1 {
  left: 3.125%;
  bottom: 0;
}
.top-banner .lattice-2 {
  right: 3.125%;
  bottom: 8.611%;
}
.top-banner .lattice-item3 {
  left: 8.615%;
  bottom: 15.74%;
}
.top-banner.banner-index .lattice-group {
  top: 20%;
  left: 29.65%;
}
.top-banner.banner-about .lattice-1 {
  bottom: auto;
  top: 150px;
}
.top-banner.banner-about .lattice-2 {
  right: 0;
  bottom: 0;
}
.top-banner.banner-about .lattice-4 {
  left: 17.7%;
  bottom: 13%;
}
.top-banner.banner-about .lattice-5 {
  right: 9.375%;
  top: 19.375%;
}
.top-banner.banner-about .lattice-group {
  top: 20%;
  left: 29.65%;
}
.top-banner.banner-news {
  height: 31.25vw;
  min-height: 500px;
  background-image: url(../images/banner-news.jpg);
  background-position: bottom center;
}
.top-banner.banner-news .lattice-5 {
  left: 5.375%;
  top: 30%;
}
.top-banner.banner-service .lattice-group1 {
  top: 22.22%;
  left: -137px;
}
.top-banner.banner-service .lattice-group2 {
  left: 4.85%;
  bottom: 6.85%;
}
.top-banner.banner-service .lattice-1 {
  left: 19.85%;
  bottom: 8.85%;
}
.top-banner.banner-service .lattice-2 {
  bottom: auto;
  top: 20%;
  right: -160px;
}
.top-banner.banner-service .lattice-5 {
  right: -14px;
  bottom: 20.37%;
}
.top-banner.banner-service .lattice-6 {
  right: 32.916%;
  bottom: 18.15%;
}
.top-banner.case-details-banner {
  height: 31.25vw;
  min-height: 500px;
  background-image: url(../images/case/detais-top.png);
}
.top-banner.case-details-banner .lattice-5 {
  top: 25%;
  right: 0;
}
.top-banner .video-bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  min-height: 80px;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(36, 40, 49, 0) 3%, #242831 94%);
}

.top-banner.banner-case .lattice-1,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-1 {
  left: 10%;
  bottom: calc(50% - 165px);
}
.top-banner.banner-case .lattice-2,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-2 {
  right: -50px;
}
.top-banner.banner-case .lattice-4,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-4 {
  bottom: 16%;
  left: 19.6875%;
}
.top-banner.banner-case .lattice-5,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-5 {
  right: 5.3125%;
  top: 15.74%;
}
.top-banner.banner-case .lattice-6,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-6 {
  top: 25%;
  left: 58.82%;
}
.top-banner.banner-case .wrap-box .lattice-5,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .wrap-box .lattice-5 {
  right: -130px;
}
.top-banner.banner-case .inner-cont .lattice-group,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .inner-cont .lattice-group {
  top: -100px;
}

.cont-til60 {
  font-size: var(--f-size-60);
  color: #fff;
  font-weight: bold;
}

.paging-box .item {
  padding: 10px;
}
.paging-box .item.current, .paging-box .item:hover {
  color: var(--main-color);
}
.paging-box a.page-prev,
.paging-box a.page-next {
  position: relative;
}
.paging-box a.page-prev .icon,
.paging-box a.page-next .icon {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  background: url(../images/icon-back.png) no-repeat center center;
  background-size: cover !important;
}
.paging-box a.page-prev:hover .icon,
.paging-box a.page-next:hover .icon {
  background: url(../images/icon-back-hover.png) no-repeat center center;
}
.paging-box a.page-prev {
  padding-left: 40px;
}
.paging-box a.page-prev .icon {
  left: 0;
}
.paging-box a.page-next {
  padding-right: 40px;
}
.paging-box a.page-next .icon {
  right: 0;
  transform: rotate(180deg);
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb120 {
  margin-bottom: 120px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.lattice-1 {
  width: 231px;
  height: 331px;
  background: url(../images/lattice-1.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-2 {
  width: 346px;
  height: 227px;
  background: url(../images/lattice-2.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-3 {
  width: 151px;
  height: 151px;
  background: url(../images/lattice-3.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-4 {
  width: 220px;
  height: 52px;
  background: url(../images/lattice-4.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-5 {
  width: 151px;
  height: 151px;
  background: url(../images/lattice-5.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-6 {
  width: 100px;
  height: 52px;
  background: url(../images/lattice-6.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-7 {
  width: 70px;
  height: 70px;
  background: url(../images/lattice-7.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-8 {
  width: 144px;
  height: 70px;
  background: url(../images/lattice-8.png) no-repeat;
  display: inline-block;
  z-index: 5;
}

.lattice-group {
  width: 240px;
  position: absolute;
}
.lattice-group.w144 {
  width: 144px;
}
.lattice-group.w120 {
  width: 120px;
}
.lattice-group.w120.static .grid span {
  opacity: 0.9;
}
.lattice-group.w120.static .grid span:nth-child(6), .lattice-group.w120.static .grid span:nth-child(7), .lattice-group.w120.static .grid span:nth-child(8), .lattice-group.w120.static .grid span:nth-child(11), .lattice-group.w120.static .grid span:nth-child(12), .lattice-group.w120.static .grid span:nth-child(13) {
  opacity: 0.5;
}
.lattice-group .grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  z-index: 10;
}
.lattice-group .grid span {
  width: 4px;
  height: 4px;
  margin: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  display: block;
}
.lattice-group .grid span.el:nth-child(4), .lattice-group .grid span.el:nth-child(26) {
  background-color: var(--color-blue);
}
.lattice-group .grid span.el:nth-child(15), .lattice-group .grid span.el:nth-child(16) {
  background-color: var(--main-color);
}
.lattice-group .grid.shadow {
  opacity: 0.1;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

.icon-left-btn,
.icon-right-btn {
  width: 40px;
  height: 40px;
  display: inline-block;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
}

.icon-left-btn {
  background-image: url(../images/icon-left-btn.png);
}

.icon-right-btn {
  background-image: url(../images/icon-right-btn.png);
}

@keyframes opacityAni {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}
.ani-delay-125 {
  transition-delay: 0.125s !important;
}

.ani-delay-25 {
  transition-delay: 0.25s !important;
}

.ani-delay-375 {
  transition-delay: 0.375s !important;
}

.ani-delay-5 {
  transition-delay: 0.5s !important;
}

.ani-delay-625 {
  transition-delay: 0.625s !important;
}

.ani-delay-75 {
  transition-delay: 0.75s !important;
}

.ani-delay-875 {
  transition-delay: 0.875s !important;
}

.ani-delay-10 {
  transition-delay: 1s !important;
}

.ani-up-in,
.ani-up-in2,
.ani-down-in2,
.ani-left-in,
.ani-left-in2,
.ani-right-in,
.ani-right-in2,
.ani-up-in-100 {
  transition: transform 0.75s ease, opacity 1s linear;
  opacity: 0;
}

.ani-left-in {
  transform: translate3d(-100%, 0, 0);
}

.ani-left-in2 {
  transform: translate3d(-50%, 0, 0);
}

.ani-right-in {
  transform: translate3d(100%, 0, 0);
}

.ani-right-in2 {
  transform: translate3d(50%, 0, 0);
}

.ani-down-in2 {
  transform: translate3d(0, -50%, 0);
}

.ani-up-in {
  transform: translate3d(0, 100%, 0);
}

.ani-up-in2 {
  transform: translate3d(0, 50%, 0);
}

.ani-up-in-100 {
  transform: translate3d(0, 120px, 0);
}

.ani-opacity-in {
  opacity: 0;
  transition: all 1s ease-in;
}

.ani-scale-in {
  transition: all 0.75s ease-in;
  transform: scale(0);
}

.active .ani-up-in,
.active .ani-up-in2,
.active .ani-down-in2,
.active .ani-left-in,
.active .ani-left-in2,
.active .ani-right-in,
.active .ani-right-in2,
.active .ani-up-in-100 {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
}
.active .ani-opacity-in {
  opacity: 1 !important;
}
.active .ani-scale-in {
  transform: scale(1);
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
}
.video-bg .video {
  height: 100%;
  width: 100%;
  line-height: 0;
  object-fit: cover;
  pointer-events: none;
  /*灰色调*/
  /*-webkit-filter:grayscale(100%)*/
}

@media screen and (max-width: 1600px) {
  :root {
    --f-size-18:14px;
    --f-size-20:16px;
    --f-size-25:20px;
    --f-size-30:24px;
    --f-size-48:40px;
    --f-size-50:40px;
    --f-size-60:48px;
    --f-size-80:58px;
  }
  .header .inner {
    padding: 18px 60px 18px 60px;
  }
  .nav li {
    font-size: 16px;
  }
  .logo {
    width: 147px;
    height: 25px;
  }
  .wrap-box {
    width: 1200px;
  }
}
@media screen and (max-width: 1440px) {
  :root {
    --f-size-20:14px;
    --f-size-30:20px;
    --f-size-48:32px;
    --f-size-50:32px;
    --f-size-60:40px;
    --f-size-80:72px;
  }
  .header .inner {
    padding: 12px 60px 12px 60px;
  }
  .logo {
    width: 110px;
    height: 19px;
  }
  .wrap-box {
    width: 1080px;
  }
  .wrap-box-1200 {
    max-width: 1080px;
  }
  .icon-left-btn,
  .icon-right-btn {
    width: 30px;
    height: 30px;
    background-size: 24px 24px;
    background-position: center center;
  }
  .nav li {
    font-size: 14px;
  }
  .nav li > a {
    padding: 0 30px;
  }
  .nav li.lang-swith::after {
    height: 12px;
  }
  .footer-cont {
    margin-bottom: 120px;
  }
  .footer-cont .infor-box {
    width: 260px;
  }
  .top-banner .wrap-box .inner-cont h3 {
    line-height: 1.4;
  }
  .top-banner.banner-case .lattice-1,
  .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-1 {
    left: -20px;
  }
  .footer .lattice-5 {
    right: 0;
    top: 50px;
  }
  .footer .lattice-6 {
    left: -30px;
  }
  .select-item .select-text::after {
    width: 16px;
    height: 9px;
    margin-top: -4px;
  }
  .select-item .select-options li.selected, .select-item .select-options li:hover {
    background-size: 16px 16px;
  }
}
@media screen and (max-width: 1080px) {
  .wrap-box {
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
  }
  .header .inner {
    padding: 12px 25px 12px 25px;
  }
  .nav li > a {
    padding: 0 20px;
  }
}
@media screen and (max-width: 920px) {
  .nav li {
    font-size: 14px;
  }
  .nav li > a {
    padding: 0 15px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --f-size-18:13px;
    --f-size-20:14px;
    --f-size-25:18px;
    --f-size-30:18px;
    --f-size-48:24px;
    --f-size-50:24px;
    --f-size-60:32px;
    --f-size-80:60px;
  }
  .mb80 {
    margin-bottom: 40px !important;
  }
  .mb120 {
    margin-bottom: 7.8125vw !important;
  }
  .icon-left-btn,
  .icon-right-btn {
    background-size: 20px 20px;
  }
  .mobile-show {
    display: inline-block !important;
  }
  .mobile-hide {
    display: none !important;
  }
  .motivation-page .header::after {
    transform: translate3d(0, -150%, 0);
  }
  .motivation-page .header.scrolling::after {
    transform: translate3d(0, 0, 0);
  }
  .header .inner {
    padding: 21px 25px 20px 25px;
  }
  .header::after {
    transform: translate3d(0, 0, 0);
  }
  .header.opened .m-nav-switch .item:nth-child(2) {
    transform: translate(5px, 5px);
  }
  .header.opened .m-nav-switch .item:nth-child(4) {
    transform: translate(5px, -5px);
  }
  .header.opened .m-nav-switch .item:nth-child(6) {
    transform: translate(-5px, 5px);
  }
  .header.opened .m-nav-switch .item:nth-child(8) {
    transform: translate(-5px, -5px);
  }
  .header.opened .nav {
    transform: translate3d(0, 0, 0);
  }
  .logo {
    position: relative;
    z-index: 900;
  }
  .m-nav-switch {
    width: 30px;
    height: 30px;
    padding: 7px;
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 850;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .m-nav-switch .item {
    width: 4px;
    height: 4px;
    margin: 3px;
    display: inline-block;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.275s ease-in;
  }
  .m-nav-switch .item:nth-child(1), .m-nav-switch .item:nth-child(2), .m-nav-switch .item:nth-child(4) {
    opacity: 0.3;
  }
  .m-nav-switch .item:nth-child(5), .m-nav-switch .item:nth-child(8) {
    background: var(--main-color);
  }
  .m-nav-switch .item:nth-child(6), .m-nav-switch .item:nth-child(9) {
    background: var(--color-blue);
  }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.275s ease-in;
    background: url(../images/m-nav-bg.png) no-repeat bottom center #363944;
    background-size: 100% auto;
  }
  .nav ul {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 160px;
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
  }
  .nav ul li {
    width: 100%;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .nav ul li .icon-arrow-d,
  .nav ul li .icon-arrow-r {
    display: none;
  }
  .nav ul li .m-drop-arrow {
    width: 36px;
    height: 36px;
    background: url(../images/dot-arrow-d.png) no-repeat center center;
    display: block;
    background-size: 22px 22px;
    transition: all 0.275s ease-in;
    position: absolute;
    right: -5px;
    top: 4px;
    z-index: 990;
  }
  .nav ul li a {
    display: block;
    padding: 0;
  }
  .nav ul li a.first-level-menu::after {
    display: none;
  }
  .nav ul li .drop-content {
    width: 100%;
    height: auto;
    position: static;
    opacity: 1;
    padding-top: 0;
    margin-left: 0;
    transform: translate3d(0, 0, 0);
    display: none;
  }
  .nav ul li .drop-content .item {
    width: 100%;
    border-bottom: none;
    line-height: 36px;
    background-color: transparent;
  }
  .nav ul li .drop-content .item > a {
    justify-content: space-between;
  }
  .nav ul li .drop-content .item .m-drop-arrow {
    top: 0;
  }
  .nav ul li .drop-content .item .drop__cont {
    width: 100%;
    display: none;
    position: static;
    opacity: 1;
    background-color: transparent;
  }
  .nav ul li .drop-content .item .drop__cont a {
    width: 100%;
    box-sizing: border-box;
    border-bottom: none;
    font-size: 0.75em;
    padding-left: 60px;
  }
  .nav ul li .drop-content .item .drop__cont a:hover {
    background: none;
  }
  .nav ul li .drop-content .item:hover {
    background: none;
  }
  .nav ul li .drop-content .item.active .m-drop-arrow {
    transform: rotate(180deg);
  }
  .nav ul li .drop-content .item.active .drop__cont {
    width: 100%;
  }
  .nav ul li .drop-content .item.active .drop__cont {
    display: block;
  }
  .nav ul li.drop-menu.active .first-level-arrow {
    transform: rotate(180deg);
  }
  .nav ul li.drop-menu.active .drop-content {
    display: block;
  }
  .nav ul li.drop-menu:hover .drop-content {
    height: auto;
  }
  .nav ul li.lang-switch {
    margin-left: 0;
  }
  .nav ul li.lang-switch::after {
    display: none;
  }
  .nav .contact-infor-tabbox {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 30px;
  }
  .nav .contact-infor-tabbox .infor-tab-nav {
    padding-top: 0;
  }
  .top-banner {
    height: 106.75vw;
    min-height: auto;
    margin-top: 61px;
    background-size: 100% auto;
    background-position: center bottom;
  }
  .top-banner .wrap-box {
    align-items: flex-start;
    justify-content: center;
    text-align: center;
  }
  .top-banner .inner-cont {
    width: 95%;
    padding-top: 14.667vw;
  }
  .top-banner .inner-cont h3 {
    padding-bottom: 2.135vw;
  }
  .top-banner .inner-cont .en {
    display: none;
  }
  .top-banner .inner-cont .zh {
    width: 100%;
  }
  .top-banner .inner-cont .lattice-group {
    top: 50px;
    left: 20.5%;
  }
  .top-banner.case-details-banner, .top-banner.banner-news {
    height: 42.5vw;
    min-height: 0;
    max-height: 200px;
    background-size: cover;
  }
  .top-banner.case-details-banner .wrap-box, .top-banner.banner-news .wrap-box {
    justify-content: flex-start;
    text-align: left;
    align-items: center;
  }
  .top-banner.case-details-banner .wrap-box .inner-cont, .top-banner.banner-news .wrap-box .inner-cont {
    padding-top: 0;
  }
  .top-banner.case-details-banner .wrap-box .inner-cont .pb20, .top-banner.banner-news .wrap-box .inner-cont .pb20 {
    padding-bottom: 0 !important;
  }
  .top-banner.case-details-banner .wrap-box .inner-cont h3, .top-banner.banner-news .wrap-box .inner-cont h3 {
    text-align: left;
  }
  .top-banner.case-details-banner .video-bg::after, .top-banner.banner-news .video-bg::after {
    display: block;
  }
  .top-banner.banner-news .lattice-1 {
    display: none;
  }
  .top-banner.banner-news .lattice-5 {
    right: auto;
    left: -30px;
    top: 30%;
  }
  .top-banner.banner-index {
    height: 110vw;
  }
  .top-banner.banner-index .inner-cont {
    padding-top: 8vw;
  }
  .top-banner.banner-index .lattice-1 {
    bottom: 30%;
    left: -20px;
  }
  .top-banner.banner-index .lattice-2 {
    bottom: -20px;
  }
  .top-banner.banner-index .lattice-group, .top-banner.banner-about .lattice-group {
    display: none;
  }
  .top-banner.case-details-banner {
    background-size: cover;
  }
  .top-banner .video-bg::after {
    display: none;
  }
  .top-banner.banner-service .lattice-1,
  .top-banner.banner-case .lattice-1,
  .top-banner.banner-about .lattice-1 {
    left: 25px;
    bottom: auto;
    top: -65px;
  }
  .top-banner.banner-service .lattice-2,
  .top-banner.banner-case .lattice-2,
  .top-banner.banner-about .lattice-2 {
    bottom: -30px;
    right: 10px;
    top: auto;
  }
  .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-1 {
    left: 25px;
    bottom: calc(50% - 80px);
  }
  .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-2 {
    right: 0;
    bottom: calc(67% - 80px);
  }
  .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-4 {
    bottom: auto;
    top: 18.5%;
    left: 8.625%;
  }
  .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-5 {
    right: -60px;
  }
  .motivation-swiper .motivation-slide:first-child .wrap-box .lattice-group {
    top: -10px;
    left: -38px !important;
  }
  .paging-box .item {
    padding: 10px 6px;
  }
  .paging-box a.page-prev .icon,
  .paging-box a.page-next .icon {
    width: 20px;
    height: 20px;
    margin-top: -10px;
  }
  .paging-box a.page-prev {
    padding-left: 20px;
    padding-right: 8px;
  }
  .paging-box a.page-next {
    padding-right: 20px;
    padding-left: 6px;
  }
  .footer {
    min-height: 0;
  }
  .footer .lattice-6 {
    left: auto;
    right: 20px;
    top: 10px;
  }
  .footer .lattice-group {
    right: auto;
    left: 0;
    top: 10%;
  }
  .footer .video-bg {
    top: 60%;
  }
  .footer-cont {
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
    padding-bottom: 80px;
  }
  .footer-cont .infor-box {
    width: 100%;
    padding-top: 100px;
  }
  .footer-cont .infor-box .WX-code {
    display: none;
  }
  .bot-logo {
    width: 122px;
    margin: 0 auto;
  }
  .form-box {
    width: 100%;
  }
  .form-box .form-item {
    width: 48%;
    padding-right: 0;
  }
}
@media screen and (max-width: 480px) {
  :root {
    --f-size-18:12px;
    --f-size-20:12px;
    --f-size-25:13px;
    --f-size-30:16px;
    --f-size-48:20px;
    --f-size-50:20px;
    --f-size-60:24px;
    --f-size-80:36px;
  }
  .lattice-1, .lattice-2, .lattice-3, .lattice-4, .lattice-5, .lattice-6, .lattice-7, .lattice-8, .lattice-group {
    transform: scale(0.5);
  }
  .mb80 {
    margin-bottom: 7.5vw !important;
  }
  .top-banner .lattice-1 {
    transform-origin: left center;
  }
  .top-banner .lattice-2 {
    transform-origin: right center;
  }
  .top-banner.case-details-banner {
    height: 60vh;
    min-height: 0;
  }
  .inner-cont {
    font-size: 20px;
  }
  .footer-cont .infor-box {
    padding-top: 50px;
  }
  .form-box .form-item {
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  :root {
    --f-size-25:12px;
    --f-size-30:14px;
  }
}
@media screen and (max-width: 320px) {
  :root {
    --f-size-18:11px;
    --f-size-20:11px;
    --f-size-25:11px;
    --f-size-30:13px;
    --f-size-48:16px;
    --f-size-50:16px;
    --f-size-60:20px;
    --f-size-80:30px;
  }
  .paging-box .item {
    padding: 10px 4px;
  }
}